<template>
  <div class="app-container">
    <el-card shadow="never" class="mb20">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="first">
          <template slot="label">
            <el-badge :value="total.StartProcess" class="task-badge">
              我的发起
            </el-badge>
          </template>
          <StartProcess ref="StartProcess" />
        </el-tab-pane>
        <el-tab-pane name="second">
          <template slot="label">
            <el-badge :value="total.PersonalTask" class="task-badge">
              我的待办
            </el-badge>
          </template>
          <PersonalTask ref="PersonalTask" />
        </el-tab-pane>
        <el-tab-pane name="third">
          <template slot="label">
            <el-badge :value="total.PartakeTask" class="task-badge">
              我的参与
            </el-badge>
          </template>
          <PartakeTask ref="PartakeTask" />
        </el-tab-pane>
        <el-tab-pane name="fourth">
          <template slot="label">
            <el-badge :value="total.NotifyProcess" class="task-badge">
              转发通知
            </el-badge>
          </template>
          <NotifyProcess ref="NotifyProcess" />
        </el-tab-pane>
        <!-- <el-tab-pane label="流程公示" name="fifth">
          <ProcessPublicity ref="ProcessPublicity" />
        </el-tab-pane>-->
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import Image from '@/assets/avatar2.jpg'
import StartProcess from '@/views/workflow/bpmn/task/components/StartProcess'
import PersonalTask from '@/views/workflow/bpmn/task/components/PersonalTask'
import PartakeTask from '@/views/workflow/bpmn/task/components/PartakeTask'
import NotifyProcess from '@/views/workflow/bpmn/task/components/NotifyProcess'
import { queryTodoCount } from '@/api/workflow/bpmn/runtime'
// import ProcessPublicity from '@/views/workflow/bpmn/task/components/ProcessPublicity'

export default {
  components: {
    StartProcess,
    PersonalTask,
    PartakeTask,
    NotifyProcess
    // ProcessPublicity
  },
  data() {
    return {
      total: { // 我的任务各项汇总数
        StartProcess: 0,
        PersonalTask: 0,
        PartakeTask: 0,
        NotifyProcess: 0
      },
      activeName: 'second'
    }
  },
  created() {
    const PersonalTask = this.$route.params.PersonalTask
    if (PersonalTask === true) {
      this.activeName = 'second'
    }
    this.queryTodoCount()
    this.$nextTick(() => {
      this.handleFilter()
    })
  },
  mounted() {},
  methods: {
    queryTodoCount() {
      queryTodoCount().then(res => {
        this.total = { // 我的任务各项汇总数
          StartProcess: res.data.startCount,
          PersonalTask: res.data.todoCount,
          PartakeTask: res.data.partakeCount,
          NotifyProcess: res.data.notifyCount
        }
      })
    },
    handleFilter() {
      if (this.activeName == 'first') {
        this.$refs.StartProcess.getList()
      } else if (this.activeName == 'second') {
        this.$refs.PersonalTask.getList()
      } else if (this.activeName == 'third') {
        this.$refs.PartakeTask.getList()
      } else if (this.activeName == 'fourth') {
        this.$refs.NotifyProcess.getList()
      } else if (this.activeName == 'fifth') {
        // this.$refs.ProcessPublicity.getList()
      }
    },
    handleClick(tab, event) {
      this.handleFilter()
    }
  }
}
</script>

<style scoped>
li.mb20 {
  display: flex;
  border-bottom: 1px solid #f1f1f1;
  padding: 8px;
}
.content-span {
  flex: 1;
  max-height: 63px;
  overflow: hidden;
}

.flex-image {
  width: 60px;
  flex: 0 0 auto;
}
.task-badge >>> .el-badge__content {
  top: 7px;
}
</style>
